<template>
  <div class="about-page">
    <h1>健康饮食小贴士</h1>
    <ul class="tip-list" v-if="tips.length">
      <li v-for="(tip, index) in tips" :key="index">
        {{ tip.tip_Content }} - {{ formatTime(tip.created_At) }}
      </li>
    </ul>
    <p v-else>暂无健康饮食小贴士</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const tips = ref([]);

// 格式化时间函数
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleString();
};

(async () => {
  try {
    const response = await axios.get('http://localhost:8080/MDMS0214_war/healthDietTip/all');
    tips.value = response.data;
  } catch (error) {
    console.error('数据获取失败:', error);
  }
})();
</script>

<style scoped>
.about-page {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

.tip-list {
  list-style-type: none;
  padding: 0;
}

.tip-list li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
}

h1 {
  text-shadow: 0 0 5px white;
}
</style>